<template>
    <div class="nav-main">
        <img src="@/assets/haha.jpg" alt="" class="nav-item">
        <el-icon class="nav-item nav-item-icon" v-for="nav in navList" :key="nav" 
            :class="[activeId === nav.id ? 'nav-item-icon-active' : '']"
            @click="handleNavClick(nav)">
            <component :is="nav.icon"/>
        </el-icon>
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    onBeforeMount
} from "vue";

import {useRouter} from 'vue-router';


export default {
    name: "LoginView",
    emits: ['navChange'],

    setup(props, context) {
        const router = useRouter();
        const state = reactive({
            navList: [
                {
                    id: 0,
                    title: '消息',
                    icon: 'Comment',
                    path: '/home'
                },
                {
                    id: 1,
                    title: '邮件',
                    icon: 'Briefcase',
                    path: '/home/meeting'
                },
                {
                    id: 2,
                    title: '文档',
                    icon: 'TrendCharts',
                    path: '/home/diskinfo'
                },
                {
                    id: 3,
                    title: '日程',
                    icon: 'List',
                    path: '/home/calendar'
                },
                {
                    id: 4,
                    title: '会议',
                    icon: 'Promotion',
                    path: '/home/mail'
                },
                {
                    id: 5,
                    title: '工作台',
                    icon: 'Menu',
                    path: '/home/workstation'
                },
                {
                    id: 6,
                    title: '组织',
                    icon: 'Histogram',
                    path: '/home/organization'
                },
                {
                    id: 7,
                    title: '组织',
                    icon: 'Warning',
                    path: '/home/about'
                }
            ],
            activeId: 0
        });

        onBeforeMount(() => {
            router.push('/home');
        });

        function handleNavClick(nav) {
            state.activeId = nav.id;
            context.emit('navChange', state.activeId);
            router.push(nav.path);
        }
        
        return {
            ...toRefs(state),
            handleNavClick
        };
    },
};
</script>

<style lang="scss" scoped>
.nav-main {
    width: 60px;
    background: #3975c6;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;  
    // justify-content: center; 

    img {
        height: 40px !important;
        width: 40px !important;
        border-radius: 10px;
        margin: 10px;
    }

    .nav-item {
        -webkit-app-region: no-drag;
        height: 36px;
        width: 36px;
        border-radius: 5px;
    }

    .nav-item-icon {
        color: #afc8e8;
        font-size: 20px;
        font-weight: 800;
        margin: 5px;

        &:hover {
            background: #4c83cc;
        }
    }

    .nav-item-icon-active {
        color: #f1f1f1;
        background: #4c83cc;
    }
}
</style>

